<template>
    <div class="noticeList">
        <div class="my-header"></div>
        <div class="listmain">
            <div class="box" @click="$router.push('/satisfactionSurveyOneEdit?type=行政审批科')">
                <div>行政审批科</div>
                <div class="i-material-symbols:chevron-right box-1-icon"></div>
            </div>
            <div class="box" @click="$router.push('/satisfactionSurveyOneEdit?type=殡管所')">
                <div>殡管所</div>
                <div class="i-material-symbols:chevron-right box-1-icon"></div>
            </div>
            <div class="box" @click="$router.push('/satisfactionSurveyOneEdit?type=殡仪馆')">
                <div>殡仪馆</div>
                <div class="i-material-symbols:chevron-right box-1-icon"></div>
            </div>
            <div class="box" @click="$router.push('/satisfactionSurveyOneEdit?type=乡镇街道殡改工作人员')">
                <div>乡镇街道殡改工作人员</div>
                <div class="i-material-symbols:chevron-right box-1-icon"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import type { Ref } from 'vue';
    import PullRefreshList from '@/components/PullRefreshList.vue';
    const router = useRouter();
    const route = useRoute();

    import { useStore } from '@/store';
    const store = useStore();

    const list: Ref<Array<any>> = ref([]);
    const loading: Ref<boolean> = ref(false);
    const finished: Ref<boolean> = ref(false);
    const refreshing: Ref<boolean> = ref(true);
    const routerPush = (val) => {
        // 后面看是跳转还是什么
    };
</script>

<style lang="scss" scoped>
    .noticeList {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .my-header {
        display: flex;
        justify-content: center;
        background: url(@/assets/img/policy/policybg.png) no-repeat;
        background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .my-header::after {
        content: '';
        width: 95%;
        height: 185px;
        margin-top: 20px;
        background: url(@/assets/img/banner/gmjs_bg18.png);
        background-size: 100% 100%;
        border-radius: 5px;
    }

    .my-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

    .maindiv {
        width: 90%;
        /* border: 1px solid #2C3E50; */
        box-shadow: 0px 0px 5px 5px #e3eee9;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 25px;
    }

    .maindivfont1 {
        color: #333333;
        font-size: 12pt;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .maindivfont2 {
        color: #666666;
        font-size: 10pt;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .listmain {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        .box {
            width: 350px;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-size: 20px;
            border-radius: 10px;
            padding: 0 20px;
            margin: 0 0 10px 0px;
            box-sizing: border-box;
            background: linear-gradient(180deg, rgb(86, 193, 255) 0%, rgb(86, 168, 255) 100%);
            box-shadow: 0px 0px 1px 1px rgb(86, 168, 255);
        }
        .box-1-icon {
            font-size: 30px;
            color: #ffffff;
        }
    }
</style>
